<template>

    <div class="container">
        <div class="header">

            <h3>My Todo List </h3>

            <div class="input">
                <input type="text" id="msg" v-model="toDoItem" /><button @click="btnAdd">添加</button>
            </div>
        </div>
        <div class="todolistwrapper">
            <div class="status">
                <div class="stsitem " @click="changeSelectedStatus(-1)" :class="selectStatus == -1 ? 'active' : ''">
                    <!-- <input type="radio"> -->
                    <div>全部</div>
                </div>
                <div class="stsitem" @click="changeSelectedStatus(0)" :class="selectStatus == 0 ? 'active' : ''">
                    <!-- <input type="radio"> -->
                    <div>Wating</div>
                </div>
                <div class="stsitem" @click="changeSelectedStatus(1)" :class="selectStatus == 1 ? 'active' : ''">
                    <!-- <input type="radio"> -->
                    <div>Doing</div>
                </div>
                <div class="stsitem" @click="changeSelectedStatus(2)" :class="selectStatus == 2 ? 'active' : ''">
                    <!-- <input type="radio"> -->
                    <div>Finished</div>
                </div>
            </div>

            <div class="list">
                <div v-for="(toDo, index) in statusToDoList" class="listitemWrapper " @click="changeStatus(index)">
                    <div class="listitem">
                        <div class="sts"
                            :class="toDo.status == 0 ? 'bgYellow' : (toDo.status == 1) ? 'bgRed' : 'bgGreen'">
                            {{ toDo.status }} -- {{ toDo.status == 0 ? 'Wating' : (toDo.status == 1) ? 'Doing' :
                                'Finished'
                            }}

                        </div>
                        <div class="note">{{ toDo.content }}</div>
                        <div class="delbtn" @click.stop="deleteToDo(index)">X</div>
                    </div>

                </div>
                <!-- <div class="listitem even">
                    <div class="sts bgRed">Wating</div>
                    <div class="note">中午吃饭</div>
                    <div class="delbtn">X</div>
                </div>
                <div class="listitem">
                    <div class="sts bgGreen">Finished</div>
                    <div class="note">下班睡觉</div>
                    <div class="delbtn">X</div>
                </div> -->

            </div>

        </div>

    </div>


</template>

<script setup lang="ts" name='ToDoList'>
import { ref, reactive, type Ref, computed } from "vue";
interface ToDoInterface {
    status: number;  //0 wating  1 doing 2 finished
    content: string;
}



//输入框的绑定项目
let toDoItem = ref('')
let selectStatus = ref(-1); //-1 All   0 wating  1 doing 2 finished


//所有项目的集合
let toDoList: Ref<Array<ToDoInterface>> = ref<Array<ToDoInterface>>([])

function btnAdd() {
    console.log("toDo.value", toDoItem.value);
    toDoList.value.push({
        status: 0,
        content: toDoItem.value
    })


    toDoItem.value = ''
}

function changeSelectedStatus(status: number) {
    console.log("changeSelectedStatus  ", status)
    selectStatus.value = status
}

let statusToDoList = computed(() => {
    console.log("selectStatus.value", selectStatus.value)
    return toDoList.value.filter(item => {
        return item.status == selectStatus.value || selectStatus.value == -1
    })
})

//你告诉我 index，修改状态
function changeStatus(index: number) {
    let item: ToDoInterface = toDoList.value[index];
    let oldStatus: number = toDoList.value[index].status;
    if (oldStatus == 0) {
        item.status = 1
    } else if (oldStatus == 1) {
        item.status = 2
    } else if (oldStatus == 2) {
        alert("已经是完成的状态了")
    }
}


function deleteToDo(index: number) {
    toDoList.value.splice(index, 1)
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}


body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 700px;

    /* background-color: azure; */
}

.container .header {
    height: 200px;
    width: 100%;
    background-color: #F54336;
    padding-top: 50px;
}

.container .header h3 {
    /* margin-top: 40px; */
    text-align: center;
    color: white;
}

.container .header .input {
    width: 80%;
    height: 60px;
    margin: 0 auto;
    background-color: aliceblue;

    display: flex;

}

.container .header .input input {
    flex: 1;
    height: 60px;
    outline: none;
    font-size: 30px;
}

.container .header .input button {
    width: 120px;
    height: 100%;
    cursor: pointer;
    background-color: rgb(149, 168, 136);
}

.container .header .input button:hover {
    background-color: blue;
    color: white;
}

.container .header .input button:active {
    background-color: rgb(169, 169, 216);
    color: white;
}



.todolistwrapper .status {
    width: 100%;
    height: 100px;
    /* border: solid 0.5px grey; */
    display: flex;
    justify-content: space-between;
}

.todolistwrapper .status .stsitem {
    width: 22%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 5px rgb(177, 176, 176)
}

.todolistwrapper .status .active {
    background-color: grey;
    box-shadow: 0 0 10px rgb(131, 130, 130)
}

.todolistwrapper .list {
    height: 400px;
    overflow-y: auto;
}

.todolistwrapper .list .listitemWrapper {
    width: 100%;
    /* height: 70px; */
    /* border: solid 1px red; */
    /* display: flex; */
}

.todolistwrapper .list .listitemWrapper .listitem {
    width: 100%;
    height: 70px;
    /* border: solid 1px red; */
    display: flex;
}

.todolistwrapper .list .listitem .sts {
    width: 100px;
    height: 100%;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
}

.todolistwrapper .list .listitem .note {
    flex: 1;
    height: 100%;
    /* background-color: black; */
    line-height: 70px;
    padding-left: 5px;
    box-shadow: inset 0 0 10px green;
    cursor: pointer;
}

.todolistwrapper .list .listitem .delbtn {
    width: 100px;
    height: 100%;
    /* background-color: rgb(177, 109, 109) */
    border: solid 0.2px grey;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
}

.todolistwrapper .list .listitem .delbtn:hover {
    background-color: aliceblue;
}

.bgRed {
    background-color: #F54336;
}

.bgYellow {
    background-color: yellow;
}

.bgGreen {
    background-color: green;
}
</style>